<!--基桩工程检测管理--基桩工程信息--查看-->
<template>
  <div class="department commonDialog">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div>
          <el-checkbox v-model="checked" @change="see()">查看下级</el-checkbox>
        </div>
      </div>
      <tree
        :treeData="treeData"
        :checkData="checkData"
        name="engineerList"
        nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick"
        :defaultProps="defaultProps"
      >
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 部门信息 -->
      <div class="department_right_name">
        <div>
          {{ name }}
        </div>
      </div>

      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left">
          <div class="selectBox">
            <span class="nameBox">检测状态：</span>
            <el-select
              @change="function (v) {
                  return selectJudgetype(v);
                }
              "
              v-model="getList.keyWord"
              placeholder="选择检测状态"
            >
              <el-option
                v-for="v in Checktype"
                :key="v.fItemName"
                :label="v.fItemName"
                :value="v"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="print">
          <div class="printTable">
            <!-- F_Id -->
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="small"
              @click="getDataList(equipmentDetailId)"
            >
            </el-button>
            <el-button
              type="primary"
              v-if="yj_view"
              icon="el-icon-search"
              size="small"
              @click="getDetail(equipmentDetailId)"
              >查看
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <div class="tableInfo">
          <el-table
            ref="multipleTableA"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            @row-click="getRowInfo"
            :data="tableData"
            style="width: 100%"
            height="87.5%"
            stripe
            border
            highlight-current-row
            @current-change="rowChange"
          >
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="F_Status"
              label="检测状态"
              align="center"
              width="80"
            >
              <!-- 超出鼠标滑过显示 -->
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.F_Status">{{
                    scope.row.F_Status
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="F_ProjectName" label="项目名称">
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.F_ProjectName">{{
                    scope.row.F_ProjectName
                  }}</a>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="F_CompanyName"
              label="施工项目公司"
              width="120"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.F_CompanyName">{{
                    scope.row.F_CompanyName
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <!--  -->
            <el-table-column prop="F_Note" label="项目部单位" width="120">
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.F_Note">{{
                    scope.row.F_Note
                  }}</a>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="F_EngineeringName"
              label="工程名称"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  @click="openDialog(scope.row)"
                  @cell-dblclick="openDialog"
                  type="text"
                  size="small"
                  style="padding: 0 !important; margin: 0"
                >
                  {{ scope.row.F_EngineeringName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="F_EngineeringLocation"
              align="center"
              label="工程地点"
              width="150"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a
                    href="javascript:;"
                    :title="scope.row.F_EngineeringLocation"
                    >{{ scope.row.F_EngineeringLocation }}</a
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="F_PierCount"
              align="center"
              label="墩台个数"
              width="69"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.F_PierCount">{{
                    scope.row.F_PierCount
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="F_FoundationCount"
              label="基桩数量"
              width="69"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.F_FoundationCount">{{
                    scope.row.F_FoundationCount
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="CheckedFoundationCount"
              label="已检基桩"
              width="69"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a
                    href="javascript:;"
                    :title="scope.row.CheckedFoundationCount"
                    >{{ scope.row.CheckedFoundationCount }}</a
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="CheckRate"
              label="完成率%"
              width="69"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.CheckRate">{{
                    scope.row.CheckRate
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="FirstClasscount"
              label="I类"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.FirstClasscount">{{
                    scope.row.FirstClasscount
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="SecondClasscount"
              label="II类"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.SecondClasscount">{{
                    scope.row.SecondClasscount
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ThirdClasscount"
              label="III类"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.ThirdClasscount">{{
                    scope.row.ThirdClasscount
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="FourthClasscount"
              label="IV类"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.FourthClasscount">{{
                    scope.row.FourthClasscount
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="CheckStartDates"
              label="检测开始时间"
              width="95"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.CheckStartDates">{{
                    scope.row.CheckStartDates
                  }}</a>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="CheckEndingDates"
              label="结束检测日期"
              width="95"
              align="center"
            >
              <template slot-scope="scope">
                <div class="lineBoxhidden">
                  <a href="javascript:;" :title="scope.row.CheckEndingDates">{{
                    scope.row.CheckEndingDates
                  }}</a>
                </div>
              </template>
            </el-table-column>
            <template slot="empty">
              <img
                style="width: 285px; height: 208px"
                src="@/assets/img/undata.png"
                alt=""
              />
              <div class="pageFlagText">暂时没有数据哦！</div>
            </template>
          </el-table>
          <div
            class="blocks"
            v-if="navigatepageNums > 1"
            :style="{
              width: treelength ? 'calc(100vw - 430px)' : 'calc(100vw - 241px)',
            }"
          >
            <!--  -->
            <div class="paginationInfo">
              检索到{{ queryCriteriaData.total }} 条记录 | 显示第
              <span v-if="getList.page == 1">{{ getList.page }}</span
              ><span v-else>{{ 10 * (getList.page - 1) }}</span> -
              <!-- {{ 10 * getList.page }} 条记录 -->
              <span
                v-if="queryCriteriaData.pages == queryCriteriaData.lastPage"
              >
                {{ queryCriteriaData.total }}</span
              >
              <span v-else> {{ 10 * getList.page }} </span>
              条记录
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="getList.page"
              :page-size="getList.pageSize"
              layout="prev, pager, next, jumper"
              :total="queryCriteriaData.total"
            >
            </el-pagination>
          </div>
          <div
            v-else
            class="blocks1"
            :style="{
              width: treelength ? 'calc(100vw - 430px)' : 'calc(100vw - 241px)',
            }"
          >
            .
          </div>
        </div>

        <div class="echrts">
          <div class="projectBox">
            <div class="textBox">工程统计</div>
            <div class="commonEchars">
              <RingEcharts1 :commonData="statisticInfo"></RingEcharts1>
            </div>
          </div>
          <div class="pieNum">
            <div class="textBox">累计基桩数</div>
            <div class="commonEchars">
              <div class="topecharts">
                <peiNum :commonData="statisticInfo"></peiNum>
              </div>
              <div class="bootomData">
                <div class="textTitle">检测完成数分布</div>
                <div class="textData">
                  <div class="top">
                    <div class="oneBox oneBox1">
                      <div class="lefts">Ⅰ类</div>
                      <div class="rights">
                        {{ statisticInfo.FirstClasscount }}
                      </div>
                    </div>
                    <div class="oneBox oneBox2">
                      <div class="lefts">Ⅱ类</div>
                      <div class="rights">
                        {{ statisticInfo.SecondClasscount }}
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="oneBox oneBox3">
                      <div class="lefts">Ⅲ类</div>
                      <div class="rights">
                        {{ statisticInfo.ThirdClasscount }}
                      </div>
                    </div>
                    <div class="oneBox oneBox4">
                      <div class="lefts">Ⅳ类</div>
                      <div class="rights">
                        {{ statisticInfo.FourthClasscount }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pieStatitic">
            <div class="textBox">基桩统计</div>
            <div class="commonEchars">
              <pieStatitic :commonData="rateInfo"></pieStatitic>
            </div>
          </div>
        </div>
        <!-- 查看弹框 -->
        <!-- 按检测记录新增/编辑 -->
        <div class="Control-11 mechanism_dialogs">
          <el-dialog
            :close-on-click-modal="false"
            width="60%"
            :title="dialogText"
            v-dialogDrag
            :visible.sync="dialogTableVisible"
            v-loading="loadingDialog"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
          >
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">基桩工程信息</el-menu-item>
              <el-menu-item index="2">检测任务信息</el-menu-item>
            </el-menu>
            <div
              v-if="activeIndex == '1'"
              class="dialogBody common duForm"
              :style="{ height: dialogHeight }"
            >
              <el-form :model="formData" ref="formData">
                <div class="tableRow">
                  <el-form-item
                    label="项目名称"
                    prop="fProjectname"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      v-model="formData.fProjectname"
                      autocomplete="off"
                      placeholder="请输入"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="施工单位"
                    prop="fCompanyname"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      v-model="formData.fCompanyname"
                      autocomplete="off"
                      placeholder="请输入"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="tableRow">
                  <el-form-item
                    label="工程名称"
                    prop="fEngineeringname"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      :disabled="dis"
                      v-model="formData.fEngineeringname"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="工程地点"
                    prop="fEngineeringlocation"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      :disabled="dis"
                      v-model="formData.fEngineeringlocation"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="tableRow">
                  <el-form-item
                    label="墩台数量(个)"
                    prop="fPiercount"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      :disabled="dis"
                      v-model="formData.fPiercount"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="基桩数量(根)"
                    prop="fFoundationcount"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      :disabled="dis"
                      v-model="formData.fFoundationcount"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="tableRow">
                  <el-form-item
                    label="登记人"
                    prop="fRegistrantname"
                    :label-width="formLabelWidth1"
                  >
                    <el-input
                      disabled
                      v-model="formData.fRegistrantname"
                      autocomplete="off"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="登记日期"
                    prop="fRegistdates"
                    :label-width="formLabelWidth1"
                  >
                    <el-date-picker
                      :disabled="dis"
                      v-model="formData.fRegistdates"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                      autocomplete="off"
                    >
                    </el-date-picker>
                  </el-form-item>
                </div>
                <el-form-item
                  label="设计文件资料"
                  :label-width="formLabelWidth1"
                  class="enclosure"
                >
                  <el-input
                    v-show="false"
                    v-model="formData.fCreateusername"
                    autocomplete="off"
                  >
                  </el-input>
                  <div
                    ref="fPhotofilelist"
                    style="
                      height: 25px;
                      line-height: 25px;
                      width: 100%;
                      display: flex;
                      border: 1px solid #d1d7e2;
                      border-radius: 5px;
                      margin: 8px 0 2px 0;
                    "
                  >
                    <div
                      v-for="(item, i) in fPhotofilelist"
                      :key="i"
                      style="margin: 2px 3px; height: 87%"
                      @click="openPdf(item)"
                    >
                      <img
                        style="max-width: 100%; max-height: 100%"
                        src="@/assets/img/pdf.png"
                      />
                    </div>
                  </div>
                </el-form-item>

                <el-form-item
                  label="工程信息简述"
                  prop="fEngineeringinfo"
                  :label-width="formLabelWidth1"
                >
                  <el-input
                    :disabled="dis"
                    v-model="formData.fEngineeringinfo"
                    type="textarea"
                    rows="4"
                    placeholder="请输入内容"
                    autocomplete="off"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div
              v-if="activeIndex == '2'"
              class="dialogBody common"
              :style="{ height: dialogHeight }"
              style="display: flex; flex-direction: row"
            >
              <div class="leftBox">
                <el-table
                  ref="multipleTables"
                  v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  @row-click="getRowInfos"
                  :data="samllTable"
                  style="width: 100%"
                  height="100%"
                  stripe
                  border
                  highlight-current-row
                  @current-change="rowChange"
                >
                  <el-table-column
                    fixed
                    type="index"
                    label="序号"
                    width="45"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fInspectiondates"
                    label="报验日期"
                    width="87"
                    align="center"
                  >
                    <!-- 超出鼠标滑过显示 -->
                    <template slot-scope="scope">
                      <div class="lineBoxhidden">
                        <a
                          href="javascript:;"
                          :title="scope.row.fInspectiondates"
                          >{{ scope.row.fInspectiondates }}</a
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="fCheckdates"
                    label="检测日期"
                    width="87"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div class="lineBoxhidden">
                        <a href="javascript:;" :title="scope.row.fCheckdates">{{
                          scope.row.fCheckdates
                        }}</a>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="fCheckfoundationcount"
                    label="检测数量"
                    width="69"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div class="lineBoxhidden">
                        <a
                          href="javascript:;"
                          :title="scope.row.fCheckfoundationcount"
                          >{{ scope.row.fCheckfoundationcount }}</a
                        >
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="fIslastcheck"
                    label="是否为最后一次检测"
                    width="128"
                  >
                    <template slot-scope="scope">
                      <div>
                        <span v-show="scope.row.fIslastcheck == 1">是</span>
                        <span v-show="scope.row.fIslastcheck == 0">否</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="rightBox">
                <el-form :model="lrCheckPiertask" ref="formDatas">
                  <el-form-item label="施工标段" :label-width="formLabelWidth">
                    <el-input
                      v-model="lrCheckPiertask.fCompanyname"
                      autocomplete="off"
                      placeholder="请输入"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="工程名称" :label-width="formLabelWidth">
                    <el-input
                      v-model="lrCheckPiertask.fNote"
                      autocomplete="off"
                      placeholder="请输入"
                      disabled
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item label="检测项目" :label-width="formLabelWidth">
                    <el-input
                      v-model="lrCheckPiertask.fCheckcontent"
                      autocomplete="off"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="本次检测基桩数量"
                    :label-width="formLabelWidth"
                  >
                    <div class="modelBox">
                      <div
                        class="modelBoxChild"
                        style="color: #409eff !important"
                        v-text="lrCheckPiertask.fCheckfoundationcount"
                        autocomplete="off"
                        disabled
                        @click="openPieDialog"
                      ></div>
                    </div>
                  </el-form-item>

                  <el-form-item label="报验日期" :label-width="formLabelWidth">
                    <el-input
                      v-model="lrCheckPiertask.fInspectiondates"
                      autocomplete="off"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="联系人和电话"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      v-model="lrCheckPiertask.fContactsandtel"
                      autocomplete="off"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="检测日期" :label-width="formLabelWidth">
                    <el-input
                      v-model="lrCheckPiertask.fCheckdates"
                      autocomplete="off"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="检测人员" :label-width="formLabelWidth">
                    <el-input
                      v-model="lrCheckPiertask.fCheckernames"
                      autocomplete="off"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="是否为该工程最后一次检测"
                    :label-width="formLabelWidth"
                  >
                    <div class="modelBox">
                      <div
                        class="modelBoxChild"
                        v-if="lrCheckPiertask.fIslastcheck == 0"
                      >
                        否
                      </div>
                      <div
                        class="modelBoxChild"
                        v-else-if="lrCheckPiertask.fIslastcheck == 1"
                      >
                        是
                      </div>
                      <div class="modelBoxChild" v-else></div>
                    </div>
                  </el-form-item>
                  <el-form-item
                    label="本次检测附件资料"
                    :label-width="formLabelWidth"
                  >
                    <div
                      ref="fPhotofilelist"
                      style="
                        height: 25px;
                        line-height: 25px;
                        width: 100%;
                        display: flex;
                        border: 1px solid #d1d7e2;
                        border-radius: 5px;
                        margin: 8px 0 2px 0;
                      "
                    >
                      <div
                        v-for="(item, i) in checkFile"
                        :key="i"
                        style="
                          margin: 2px 3px;
                          height: 87%;
                          display: flex;
                          align-items: center;
                          flex-shrink: 0;
                        "
                        @click="openPdfs(item)"
                      >
                        <img
                          style="max-width: 100%; max-height: 100%"
                          src="@/assets/img/pdf.png"
                        />
                      </div>
                    </div>
                  </el-form-item>
                  <div style="height: 30px"></div>
                </el-form>
              </div>
            </div>
          </el-dialog>
        </div>
        <div class="Control-2">
          <el-dialog :title="fFileName" v-dialogDrag :visible.sync="dialogPdf">
            <div :style="{ height: dialogHeights }">
              <!-- <iframe
                :src="pdfUrl"
                width="100%"
                height="100%"
                frameborder="0"
              ></iframe> -->
              <embed :src="`${pdfUrl}#toolbar=0`" hidden="false" type="application/pdf" height="100%" width="100%" />
            </div>
          </el-dialog>
        </div>
        <div class="dialogPies">
          <el-dialog
            title="查询"
            v-dialogDrag
            :visible.sync="dialogPie"
            top="35vh"
          >
            <div class="dialogBody common" :style="{ height: dialogHeightpie }">
              <el-table
                ref="multipleTable"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                :data="lrCheckPierfoundation"
                style="width: 100%"
                height="100%"
                stripe
                border
                highlight-current-row
                @current-change="rowChange"
              >
                <el-table-column
                  fixed
                  type="index"
                  label="序号"
                  width="45"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="fPiernumber"
                  label="墩台桩号"
                  width="70"
                  align="center"
                >
                  <!-- 超出鼠标滑过显示 -->
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fPiernumber">{{
                        scope.row.fPiernumber
                      }}</a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fPourdates"
                  label="灌注日期"
                  width="90"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fPourdates">{{
                        scope.row.fPourdates
                      }}</a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fMethod"
                  label="成孔方法"
                  width="95"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fMethod">{{
                        scope.row.fMethod
                      }}</a>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="fStrengthgrade"
                  label="强度等级"
                  width="70"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a
                        href="javascript:;"
                        :title="scope.row.fStrengthgrade"
                        >{{ scope.row.fStrengthgrade }}</a
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="fPiertype" label="桩型" width="120">
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fPiertype">{{
                        scope.row.fPiertype
                      }}</a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fCheckmethod"
                  label="检测方法"
                  width="110"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fCheckmethod">{{
                        scope.row.fCheckmethod
                      }}</a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fPiercategory"
                  label="桩类别"
                  width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fPiercategory">{{
                        scope.row.fPiercategory
                      }}</a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="picsfile"
                  label="现场照片"
                  width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div
                      style="display: flex; height: 100%; align-items: center"
                    >
                      <div
                        v-for="(v, index) in scope.row.picsfiles"
                        :key="index"
                        v-viewer
                        style="
                          margin: 2px 3px;
                          display: flex;
                          align-items: center;
                          flex-shrink: 0;
                        "
                      >
                        <img
                          style="
                            max-width: 100%;
                            max-height: 100%;
                            width: 18px;
                            height: 20px;
                          "
                          :src="v.url"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="checkfiles"
                  label="检测资料"
                  width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div
                      style="display: flex; height: 100%; align-items: center"
                    >
                      <div
                        v-for="(v, index) in scope.row.checkfiles"
                        @click="openPdfs1(v)"
                        :key="index"
                        style="
                          margin: 2px 3px;
                          display: flex;
                          align-items: center;
                          flex-shrink: 0;
                        "
                      >
                        <img
                          style="
                            max-width: 100%;
                            max-height: 100%;
                            width: 18px;
                            height: 20px;
                          "
                          src="@/assets/img/pdf.png"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fIsexception"
                  label="是否异常"
                  width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a href="javascript:;" :title="scope.row.fIsexception">{{
                        scope.row.fIsexception
                      }}</a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="handlerfiles"
                  label="处理照片"
                  width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div
                      style="display: flex; height: 100%; align-items: center"
                    >
                      <div
                        v-for="(v, index) in scope.row.handlerfiles"
                        v-viewer
                        :key="index"
                        style="
                          margin: 2px 3px;
                          display: flex;
                          align-items: center;
                          flex-shrink: 0;
                        "
                      >
                        <img
                          style="
                            max-width: 100%;
                            max-height: 100%;
                            width: 18px;
                            height: 20px;
                          "
                          :src="v.url"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fItemname"
                  label="异常资料"
                  width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div
                      style="display: flex; height: 100%; align-items: center"
                    >
                      <div
                        v-for="(v, index) in scope.row.exceptionfiles"
                        @click="openPdfs1(v)"
                        :key="index"
                        style="
                          margin: 2px 3px;
                          display: flex;
                          align-items: center;
                          flex-shrink: 0;
                        "
                      >
                        <img
                          style="
                            max-width: 100%;
                            max-height: 100%;
                            width: 18px;
                            height: 20px;
                          "
                          src="@/assets/img/pdf.png"
                        />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fExceptioninfo"
                  label="异常说明"
                  width="77"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <a
                        href="javascript:;"
                        :title="scope.row.fExceptioninfo"
                        >{{ scope.row.fExceptioninfo }}</a
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tree from "@/components/public/common-trees";

import {
  getPierProjectPageLists, // 基桩工程信息查询页面-列表页接口
  getPierProjectStatisticInfo, // 基桩工程信息查询页面-基桩统计信息接口
  getUserCompanyTreeList,
  getPierProjectByFid, //基桩工程信息详情
  getPierProjectTaskLists, // 基桩工程信息查询页面-查询基桩任务接口
  getPierTaskByFid, //基桩检测信息编辑/查询页面-基桩检测任务详情页接口
} from "@/api/request.js";
import RingEcharts1 from "@/components/public/project"; //建设项目进场材料外委情况动态统计
import peiNum from "@/components/public/peiNum"; //建设项目进场材料外委情况动态统计
import pieStatitic from "@/components/public/pieStatitic"; //建设项目进场材料外委情况动态统计

export default {
  name: "Home",
  data() {
    return {
      names: "Engineering",
      yj_view: null,
      lr_record: null,
      lr_report: null,
      dialogPdf: false,
      dialogPie: false,
      dialogHeightpie: null,
      fFileName: "",
      pdfUrl: "",
      fPhotofilelist: [], //检测记录表文件集合
      samllTable: [], //检测任务信息列表
      picsfile: [], //现场照片
      exceptionfiles: [], //异常资料
      checkfiles: [], //检测资料资料
      handlerfiles: [], //处理照片
      lrCheckPiertask: {},
      checkFile: [], //本次检测附件资料信息
      lrCheckPierfoundation: {}, // 基桩检测表格信息集合
      activeIndex: "1",
      dis: true,
      formLabelWidth1: "80px",
      statisticInfo: {}, //左侧基桩统计信息
      rateInfo: [], //右侧折线图数据
      Checktype: [
        {
          fItemName: "==请选择==",
          fItemValue: "==请选择==",
        },
        {
          fItemName: "未开始",
          fItemValue: "未开始",
        },
        {
          fItemName: "检测中",
          fItemValue: "检测中",
        },
        {
          fItemName: "已结束",
          fItemValue: "已结束",
        },
      ], //检测类型 - 根据当前登录用户获取检测类型
      fEquipmentname: [], //已选主要仪器设备
      dialogHeights: null,
      dialogText: "",
      // 列表
      getList: {
        fCompanyid: null, //机构id
        fUserid: null, //当前登录用户id
        sublevel: "1", //查看下级  1是0否
        page: 1, //页码
        pageSize: 10, //每页条数
        keyWord: "", // 选择状态
      },
      equipmentDetailId: null, //列表页id
      equipmentDetailIds: null, //检测任务信息列表页id
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      formData: {},
      sample: "",
      checked: true, //查看下级
      name: "未选择公司",
      dialogHeight: "",
      fId: null, //当前数据fId
      loading: false,
      dialogTableVisible: false,
      formLabelWidth: "150px",
      treeData: [],
      tableData: [],
      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      companyId: null,
      loadingDialog: false,
      currentRowId: "",
      treelength: false,
      treeText: {
        companyId: null,
        userId: null,
      },
      highlightBd: true, //左侧机构树停留背景色
      checkData: [], //选中tree状态id
    };
  },
  components: {
    RingEcharts1,
    peiNum,
    pieStatitic,
    tree,
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.getList.fUserid = this.userInfo.userId;
    if (JSON.parse(sessionStorage.getItem("engineerList"))) {
      var id = JSON.parse(sessionStorage.getItem("engineerList"));
      this.checkData = [id.fCompanyid];
    }
    this.getHeight();
    this.getTree();
    this.btnRole(this.names);
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });

        this.yj_view = btnStr.includes("yj_view");
      } else {
        this.yj_view = true;
      }
    },
    openPdfs1(v) {
      this.dialogPdf = true;
      this.pdfUrl = v.url;
      this.fFileName = v.fFileName;
    },
    // 检测任务信息列表
    getPierProjectTaskLists() {
      this.samllTable = [];
      this.lrCheckPiertask = {};
      this.checkFile = [];
      this.lrCheckPierfoundation = []; // 基桩检测表格信息集合
      getPierProjectTaskLists({ fId: this.equipmentDetailId })
        .then((res) => {
          if (res.errcode == 0) {
            this.samllTable = res.data;
            this.equipmentDetailIds = res.data[0].fId;
            this.getPierTaskByFid(res.data[0].fId);
          } else {
            return this.$message.error("检测任务信息列表 获取失败", res.msg);
          }
        })
        .catch(() => {
          console.log("检测任务信息列表 获取失败");
          return false;
        });
    },
    getPierTaskByFid(id) {
      this.lrCheckPiertask = {};
      this.checkFile = [];
      this.lrCheckPierfoundation = []; // 基桩检测表格信息集合
      getPierTaskByFid({ fId: id })
        .then((res) => {
          if (res.errcode == 0) {
            this.lrCheckPiertask = res.data.lrCheckPiertask; // 任务主表信息
            this.checkFile = res.data.checkFile;
            this.lrCheckPierfoundation =
              res.data.lrCheckPiertask.pierfoundationList; // 基桩检测表格信息集合
          } else {
            return this.$message.error("基桩检测表格信息  获取失败", res.msg);
          }
        })
        .catch(() => {
          console.log("基桩检测表格信息集合  获取失败");
          return false;
        });
    },
    openPdfs(v) {
      this.dialogPdf = true;
      this.pdfUrl = v.url;
      this.fFileName = v.name;
    },
    openPieDialog() {
      this.dialogPie = true;
    },
    // 页面切换
    handleSizeChange(val) {
      return val;
    },
    handleCurrentChange(val) {
      this.getList.page = val;
      this.getDataList(this.getList);
    },
    // 检测状态
    selectJudgetype(e) {
      if (e.fItemName == "==请选择==") {
        this.getList.keyWord = '';
      } else {
        this.getList.keyWord = e.fItemName;
      }
      this.getDataList(this.getList);
    },
    //查看下级
    see() {
      if (this.checked == true) {
        this.getList.sublevel = 1;
      } else {
        this.getList.sublevel = 0;
      }
      this.getDataList(this.getList);
      this.getPierProjectStatisticInfo();
    },
    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },
    // 详情
    getDetail() {
      if (this.equipmentDetailId != null && this.equipmentDetailId != "") {
        this.formData = [];
        this.samllTable = [];
        this.lrCheckPiertask = {};
        this.checkFile = [];
        this.lrCheckPierfoundation = []; // 基桩检测表格信息集合
        this.getPierProjectTaskLists();
        this.edit(1);
      } else {
        return this.$message.error("请先选择需要编辑的数据");
      }
    },
    openPdf(file) {
      this.dialogPdf = true;
      this.pdfUrl = file.url;
      this.fFileName = file.name;
    },
    // 编辑
    edit() {
      this.activeIndex = "1";
      if (this.equipmentDetailId != null && this.equipmentDetailId != "") {
        this.dialogText = "查看";
        this.dialogTableVisible = true;
        this.loadingDialog = true;
        this.formData = {};
        this.fPhotofilelist = [];
        getPierProjectByFid({ fId: this.equipmentDetailId })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;
              that.loadingDialog = false;
              that.formData = res.data.lrCheckPierproject;
              that.fPhotofilelist = res.data.designFile;
            } else {
              this.$message.error("编辑", res.msg);
              this.loadingDialog = false;
            }
          })
          .catch(() => {
            console.log("编辑详情获取失败");
            this.loadingDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要编辑的数据");
      }
    },
    // 左侧树结构
    getTree() {
      this.treeText.companyId = this.userInfo.companyId;
      this.treeText.userId = this.userInfo.userId;
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);

            if (this.treeData[0].children == undefined) {
              this.treelength = false;
            } else {
              this.treelength = true;
            }

            if (this.checkData[0]) {
              this.name = JSON.parse(
                sessionStorage.getItem("engineerList")
              ).fShortname;

              this.getList.fCompanyid = this.checkData[0];
            } else {
              this.name = this.treeData[0].fShortname; //当前点击组织机构名称
              this.getList.fCompanyid = this.treeData[0].fCompanyid; //当前点击组织机构ID
              this.checkData[0] = this.treeData[0].fCompanyid;
            }
            this.getDataList(this.getList);
            this.getPierProjectStatisticInfo(this.getList.fCompanyid);
          } else {
            this.$message.error(res.msg);
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },
    // 树状图数据处理

    // 获取列表数据
    getDataList(data) {
      this.loading = true;
      var that = this;
      getPierProjectPageLists(data)
        .then((res) => {
          if (res.errcode == 0) {
            that.loading = false;
            that.tableData = res.data.pierProjectInfo.list;
            this.queryCriteriaData = res.data.pierProjectInfo;
            this.navigatepageNums =
              this.queryCriteriaData.navigatepageNums.length;
          } else {
            this.$message.error("列表数据获取失败", res.msg);
            this.loading = false;
          }
        })
        .catch((error) => {
          this.$message.error("列表数据 接口出错", error.msg);
          this.loading = false;
        });
    },
    // 下面图表
    getPierProjectStatisticInfo() {
      var data = {
        fCompanyid: this.getList.fCompanyid,
        fUserid: this.getList.fUserid,
        sublevel: this.getList.sublevel,
        keyWord: this.getList.keyWord,
      };
      getPierProjectStatisticInfo(data)
        .then((res) => {
          if (res.errcode == 0) {
            this.statisticInfo = res.data.statisticInfo[0]; //左侧基桩统计信息
            this.rateInfo = res.data.monthRateInfo; //右侧折线图数据
          } else {
            this.$message.error("右侧折线图数据", res.msg);
          }
        })
        .catch((err) => {
          console.log("右侧折线图数据", err);
        });
    },

    // 点击当前行
    getRowInfo(e) {
      this.equipmentDetailId = e.F_Id;
    },
    getRowInfos(e) {
      this.equipmentDetailIds = e.fId;
      this.getPierTaskByFid(e.fId);
    },
    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      this.dialogHeight = h * 0.5 + "px";
      this.dialogHeights = h * 0.888 + "px";
      this.dialogHeightpie = h * 0.35 + "px";
    },
    handleNodeClick(data) {
      if (this.checked == true) {
        this.getList.sublevel = 1;
      } else {
        this.getList.sublevel = 0;
      }
      this.name = data.fShortname;
      this.getList.fCompanyid = data.fCompanyid;
      this.getDataList(this.getList);
      this.getPierProjectStatisticInfo(data.fCompanyid);
    },
    // 点击报告编码
    openDialog(row) {
      this.equipmentDetailId = row.F_Id;
      this.edit(1);
      this.getPierProjectTaskLists();
    },
    handleSelect(key) {
      this.activeIndex = key;
    },
  },
};
</script>
<style scoped lang="less">
.department {
  background: rgba(237, 237, 237, 1) !important;
}

a {
  text-decoration: none;
  color: #000;
}

.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.mechanism_nav_left {
  display: flex;
  align-items: center;
  width: 60%;
}

.mechanism_nav_left .selectBox {
  display: flex;
  align-items: center;
  /* width: 3.5rem; */
}

.mechanism_nav_left .selectBox .nameBox {
  width: 85px;
  font-size: 0.12rem;
}

.leftBox {
  width: 51%;
  box-sizing: border-box;
}

.rightBox {
  width: 49%;
  box-sizing: border-box;
}

.modelBox {
  display: flex;

  height: 40px;
  align-items: center;

  /* line-height: 40px;
    height: 25px; */
}

.modelBoxChild {
  width: 100%;
  border: 1px solid #d1d7e2;
  color: #676d77;
  background-color: #f5f7fa;
  height: 25px;
  border-radius: 4px;
  padding: 0 15px;
  line-height: 25px;
  /* box-sizing: border-box; */
}

.echrts {
  width: 99.8%;
  margin-top: 0.5%;
  height: 43%;
  display: flex;
  justify-content: space-between;
  background: rgba(237, 237, 237, 1);

  .projectBox {
    width: 22%;
    // background: red;
    background: #fff;
    height: 100%;
    padding: 0 20px;
    display: flex;
    margin-right: 0.4%;
    flex-direction: column;

    .textBox {
      position: relative;
      height: 39px;
      line-height: 39px;
      color: rgba(23, 26, 29, 0.6);
      font-size: 15px;
      border-bottom: 1px solid rgba(126, 134, 142, 0.24);
      padding-left: 10px;
    }

    .commonEchars {
      flex: 1;
    }
  }

  .pieNum {
    width: 24%;
    background: #fff;
    display: flex;
    flex-direction: column;

    height: 100%;
    padding: 0 20px;

    .textBox {
      position: relative;
      height: 39px;
      line-height: 39px;
      color: rgba(23, 26, 29, 0.6);
      font-size: 15px;
      border-bottom: 1px solid rgba(126, 134, 142, 0.24);
      padding-left: 10px;
    }

    .commonEchars {
      flex: 1;
      // height: 100%;
      overflow: hidden;

      .topecharts {
        height: 60%;
      }

      .bootomData {
        height: 40%;
        display: flex;
        flex-direction: column;
        padding: 0 0.2rem 0.1rem 0.2rem;
        // border: 1px solid green;
        box-sizing: border-box;

        .textTitle {
          height: 20px;
          // border: 1px solid red;
          line-height: 20px;
          font-size: 12px;
          color: rgba(23, 26, 29, 0.4);
        }

        .textData {
          display: flex;
          flex-wrap: wrap;
          height: 85%;
          // flex: 1;
          justify-content: space-between;
          // justify-content: space-evenly; /* 水平均匀分布 */
          align-items: center;

          /* 垂直居中 */
          .oneBox1 {
            background: url("../../../assets/img/foundationPie/01.png")
              no-repeat;

            .rights {
              color: rgba(114, 145, 253, 1);
            }
          }

          .oneBox2 {
            background: url("../../../assets/img/foundationPie/02.png")
              no-repeat;

            .rights {
              color: rgba(255, 217, 111, 1);
            }
          }

          .oneBox3 {
            background: url("../../../assets/img/foundationPie/03.png")
              no-repeat;

            .rights {
              color: rgba(255, 179, 0, 1);
            }
          }

          .oneBox4 {
            background: url("../../../assets/img/foundationPie/04.png")
              no-repeat;

            .rights {
              color: rgba(253, 115, 115, 1);
            }
          }

          .top {
            display: flex;
            width: 100%;
            height: 50%;
            justify-content: space-between;

            .oneBox {
              width: 48%;
              height: 80%;
              // border: 1px solid red;
              margin-top: 0.05rem;
              background-size: 100% 100%;
              display: flex;
              justify-content: space-between;

              .lefts {
                width: 23%;
                // border: 1px solid red;
                font-size: 0.14rem;
                color: #fff;
                text-align: center;
              }

              .rights {
                width: 65%;
                font-size: 0.18rem;
                font-weight: 700;
              }
            }
          }

          .bottom {
            display: flex;
            width: 100%;
            justify-content: space-between;
            height: 50%;

            .oneBox {
              width: 48%;
              height: 80%;
              // border: 1px solid red;
              margin-top: 0.05rem;
              background-size: 100% 100%;
              display: flex;
              justify-content: space-between;

              .lefts {
                width: 23%;
                font-size: 0.14rem;
                color: #fff;
                text-align: center;
              }

              .rights {
                width: 65%;
                font-size: 0.18rem;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }

  .pieStatitic {
    width: 51%;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 20px;
    margin-left: 0.4%;

    .textBox {
      position: relative;
      height: 39px;
      line-height: 39px;
      color: rgba(23, 26, 29, 0.6);
      font-size: 15px;
      border-bottom: 1px solid rgba(126, 134, 142, 0.24);
      padding-left: 10px;
    }

    .commonEchars {
      flex: 1;

      .textBox {
        position: relative;
        height: 39px;
        line-height: 39px;
        color: rgba(23, 26, 29, 0.6);
        font-size: 15px;
        border-bottom: 1px solid rgba(126, 134, 142, 0.24);
        padding-left: 10px;
      }

      .commonEchars {
        flex: 1;
      }
    }
  }
}

.echrts .textBox::before {
  display: block;
  content: "";
  border-left: 4px solid rgba(23, 26, 29, 0.6);
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translate(-50%, -50%);
  height: 14px;
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}

.tableInfo {
  // border: 1px solid red;
  position: relative;
  height: 57%;

  .blocks {
    /* height: 50px; */
    position: fixed;
    padding: 5px 10px;
    width: calc(100vw - 430px);
    // bottom: 5px;
    display: flex;
    font-size: 0.1rem;
    justify-content: space-between;
    /* align-items: center; */
    border-top: 1px solid #ebeef5;
    background: #fff;
    min-height: 35px;

    .paginationInfo {
      font-size: 0.12rem;
    }
  }
}

.blocks1 {
  position: fixed;
  padding: 5px 10px;
  display: flex;
  font-size: 0.1rem;
  justify-content: space-between;
  border-top: 1px solid #ebeef5;
  background: #fff;
  color: #fff;
}
</style>